<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Happy ERP</title>
    <%= stylesheet_link_tag "images" %>

    <%= stylesheet_link_tag "/javascripts/ext41/resources/css/ext-all.css" %>
    <%= stylesheet_link_tag "ext-patch.css" %>

    <%= javascript_include_tag "ext41/ext-all.js" %>
    <%= javascript_include_tag "ext41/locale/ext-lang-zh_CN.js" %>


    <script type="text/javascript">
      Ext.define("Ext.ux.comboboxtree", {
        extend : "Ext.form.field.Picker",
        requires : ["Ext.tree.Panel"],
        initComponent : function() {
          var self = this;
          Ext.apply(self, {
            fieldLabel : self.fieldLabel,
            labelWidth : self.labelWidth
          });
          self.callParent();
        },
        createPicker : function() {
          var self = this;
          var store = Ext.create('Ext.data.TreeStore', {
            proxy : {
              type : 'ajax',
              url : self.storeUrl
            },
            sorters : [{
                property : 'leaf',
                direction : 'ASC'
              }, {
                property : 'text',
                direction : 'ASC'
              }],
            root : {
              id : self.rootId,
              text : self.rootText
            },
            nodeParameter : self.treeNodeParameter
          });
          self.picker = new Ext.tree.Panel({
            height : 300,
            autoScroll : true,
            floating : true,
            focusOnToFront : false,
            shadow : true,
            ownerCt : this.ownerCt,
            useArrows : true,
            store : store,
            rootVisible : false
          });
          self.picker.on({
            checkchange : function() {
              var records = self.picker.getView().getChecked(), names = [], values = [];
              Ext.Array.each(records, function(rec) {
                names.push(rec.get('text'));
                values.push(rec.get('id'));
              });
              self.setRawValue(values.join(';'));// 隐藏值
              self.setValue(names.join(';'));// 显示值
            }
          });
          return self.picker;
        },
        alignPicker : function() {
          var me = this, picker, isAbove, aboveSfx = '-above';
          if (this.isExpanded) {
            picker = me.getPicker();
            if (me.matchFieldWidth) {
              picker.setWidth(me.bodyEl.getWidth());
            }
            if (picker.isFloating()) {
              picker.alignTo(me.inputEl, "", me.pickerOffset);// ""->tl
              isAbove = picker.el.getY() < me.inputEl.getY();
              me.bodyEl[isAbove ? 'addCls' : 'removeCls'](me.openCls
                + aboveSfx);
              picker.el[isAbove ? 'addCls' : 'removeCls'](picker.baseCls
                + aboveSfx);
            }
          }
        }
      });
      Ext.onReady(function() {
        var com =Ext.create("Ext.ux.comboboxtree", {
          id:'name',
          name:'name',
          hiddenName:'hiddenName',
          storeUrl : Resource.regionNodesUrl,
          width : 270,
          fieldLabel : '行政区划',
          labelWidth : 60,
          rootId : '44000000000000',
          rootText : '广东省',
          treeNodeParameter : 'code',
          renderTo : 'tree-div'
        }); 
      });
    </script>
  </head>
  <body>    
    <div id="tree-div"></div>
  </body>
</html>
